<template>
  <div id="app">
    <div class="n_big" style="background: url(/imgs_ls/group.png) no-repeat center;background-size: cover"></div>
    <section>
      <div>
        <div class="top">
          <p>医疗团队</p>
        </div>
        <div class="dv1">
          <div class="left_div">
            <div class="left_div_header">
              <div style="margin: 0;position: absolute;left: 0px;top: 5px;"><img src="../assets/imgs_ls/school_08.png"></div>
              <p style="color: #5a5a5a;font-size: 24px;margin: 0">医疗团队</p>
            </div>
            <hr>
            <div class="left_div_title">
              <div class="left_div_title_1">
                <div><img src="../assets/imgs_ls/2.png"></div>
                <a href="javascript:void(0)" style="color: #5a5a5a;">口腔科</a>
              </div>
              <hr>
              <div class="left_div_title_1">
                <div><img src="../assets/imgs_ls/5.png"></div>
                <a href="javascript:void(0)" style="color: #5a5a5a;">皮肤科</a>
              </div>
              <hr>
              <div class="left_div_title_1">
                <div><img src="../assets/imgs_ls/6.png"></div>
                <a href="javascript:void(0)" style="color: #5a5a5a;">内科</a>
              </div>
              <hr>
              <div class="left_div_title_1">
                <div><img src="../assets/imgs_ls/3.png"></div>
                <a href="javascript:void(0)" style="color: #5a5a5a;">心肺科</a>
              </div>
              <hr>
              <div class="left_div_title_1">
                <div><img src="../assets/imgs_ls/4.png"></div>
                <a href="javascript:void(0)" style="color: #5a5a5a;">外科</a>
              </div>
              <hr>
              <div class="left_div_title_1">
                <div><img src="../assets/imgs_ls/1.png"></div>
                <a href="javascript:void(0)" style="color: #5a5a5a;">中兽医专科</a>
              </div>
              <hr>
              <div class="left_div_title_1">
                <div><img src="../assets/imgs_ls/8.png"></div>
                <a href="javascript:void(0)" style="color: #5a5a5a;">眼科</a>
              </div>
              <hr>
              <div class="left_div_title_1">
                <div><img src="../assets/imgs_ls/7.png"></div>
                <a href="javascript:void(0)" style="color: #5a5a5a;">异宠专科</a>
              </div>
              <hr>
            </div>
          </div>
          <div class="right_div">
            <div class="right_div_top">
              <div class="right_div_top_1">
                <!--                        <img src="9.png" alt="">-->
                <a href="javascript:void(0)">首页</a>
                >
                <a href="javascript:void(0)">医疗团队</a>
                >
                <a href="javascript:void(0)">异宠专科</a>
              </div>
            </div>
            <div class="right_t1">
              <div class="right_t1_l">
                <div class="right_t1_l_t">
                  学科带头人：刘朗
                  <br>
                  团队成员：李娜 刘光超 傅雪莲
                </div>
                <div class="right_t1_l_c">
                  <p style="line-height: 25px;margin:0; direction: ltr;unicode-bidi: embed">
                               <span style="color: rgb(64,64,64);font-family: 微软雅黑,'Microsoft YaHei UI;' ">
                               美联众合动物医院口腔科专科团队成员均接受过美国兽医牙科专科培训以及欧洲兽医牙科专项培训，具备国内先进的牙科技术，通过小动物专业的牙科工作台、专用牙科X光机开展犬、猫、兔、龙猫等动物的口腔疾病检查和治疗。目前除常规的牙周、牙体、牙髓治疗外，对于猫口炎的病例多年来通过手术治疗，治愈率大幅度提高。同时还开展犬的牙齿矫正及牙齿种植的工作。
                               </span>
                  </p>
                  <p>
                    <br>
                  </p>
                </div>
              </div>
              <div class="r_t_r">
                <div style="width: 480px">
                  <el-carousel trigger="click" height="270px">
                    <el-carousel-item v-for="url in Arr">
                      <img :src="url" alt="" style="width: 100%;height: 278px;">
                    </el-carousel-item>
                  </el-carousel>
                </div>
              </div>
            </div>
            <div class=" r_t_l">
              <el-carousel style=" height: 500px">
                <el-carousel-item class="r_t_l_1" v-for="url in arr2"
                                  style="width: 1000px; height: 500px;">
                  <div style="height: 100%;">
                    <el-image :src="url" fit="cover"></el-image>
                    <!--                    <el-image src="/imgs_ls/10.png" fit="cover"></el-image>-->
                  </div>
                  <div class="r_t_l_2">
                    <div class="r_t_l_2_1">
                      刘郎
                      <span style="font-size: 14px;margin-left: 10px;">Liu Lang</span>
                    </div>
                    <div class="r_t_l_2_2">
                      <p>口腔科专家</p>
                      <p>中国农业大学临床兽医博士</p>
                      <p>高级兽医师职称</p>
                      <p>北京市小动物诊疗行业协会秘书长</p>
                      <p>第五届亚洲小动物兽医师办会联盟FASAVA)主席</p>
                      <p>北京伴侣动物医院、美联众合动物医院创始人之一</p>
                      <p><br></p>
                      <p>
                                            <span style="display:block;text-indent: 2em">
                                                1993年开始从事小动物临床工作。北京伴侣动物医院、亚太地区小动物兽
                                                医师办会联盟、北京流浪动物免费绝育公益活动创始人和发起人之一。目前担
                                                任北京小动物诊疗行业协会秘书长，中国兽医协会宠物诊疗分会副会长，另受
                                                聘干北京农业服业学院客座教授，西北政法大学动物保护法研究中心客座研究
                                                员以及北京农学院硕十指导教师，曾获得北京市兽医行业特殊贡献奖和第二届
                                                中国十大杰出兽医奖，多次参加国际兽医学术会议交流。
                                            </span>
                      </p>
                      <br>
                      <p>
                                            <span style="display:block;text-indent: 2em">
                                                擅长于小动物外科、牙科以及各种疑难病的诊治，果计牙科病例近万
                                                例。刘朗博士于2005年开始专注小动物牙科疾病的探索，并师从在美
                                                国被称为牙科之父的皮特艾米利先生，开创中国小动物牙科之先河。
                                                引入了中国最先进的小动物牙科诊疗设备，并推动小动物牙科在中国的
                                                发展及专业知识传播，启蒙和培养了一批专业牙科诊治人才，填补了中
                                                国小动物牙科的空白。
                                            </span>
                      </p>
                      <br>
                      <p>
                                            <span style="display:block;text-indent: 2em">
                                                在小动物牙科技术方面，刘朗博十是最早在国内开展猫的慢性牙龈性口
                                                炎拔牙治疗、犬猫口鼻瘘的皮瓣修补术、一次性根管治疗、动物牙冠的
                                                制福和犬猫种植牙的专业口时科医生主持译了《动物牙技术操作图谱》
                                                和《猫的牙科学》，填补了国内小动物牙科方面技术资料的空白。
                                            </span>
                      </p>
                    </div>
                  </div>

                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
        </div>
        <!--    <div class="cat"><img src="../assets/imgs_ls/cat.jpg" alt=""></div>-->
      </div>
    </section>

  </div>
</template>

<script>
export default {
  data() {
    return {
      Arr: ["/imgs_ls/r.jpg", "/imgs_ls/r.jpg", "/imgs_ls/r.jpg"],
      arr2: ["/imgs_ls/10.png", "/imgs_ls/10.png", "/imgs_ls/10.png"]
    }
  },
  methods: {}
}
</script>

<style scoped>
* {
  margin: 0px;
  padding: 0px;
}

a {
  text-decoration: none;
}

ul {
  list-style: none;
}

#app {
  margin: 0 auto;
  font-size: 12px;
  font-family: "微软雅黑";
  color: #525252;
  /*background: #fff;*/

}



.n_big {
  width: 100%;
  height: 588px;
  /*margin-top: -140px;*/
}

section {
  margin: 50px auto;
  overflow: hidden;
  margin-top: 20px;
  width: 100%;
  height: auto;
  padding-top: 60px;
}

.top {
  width: 100%;
  text-align: center;
  font-size: 36px;
  color: #5a5a5a;
  font-weight: bold;
  background: url(../assets/imgs_ls/tit.png) no-repeat center bottom;
  height: 90px;
  margin-top: 50px;
  margin-bottom: 50px;
  overflow: hidden;
  /*position: relative;*/
}

/*==========================================*/
.dv1 {
  width: 1200px;
  display: flex;
  margin: 20px auto;
}

.left_div {
  flex: 0 0 auto;
  margin-right: 40px;
  width: 170px;

}

.left_div_header {

  align-items: center;
  width: 200px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  color: #5a5a5a;
  font-size: 24px;
  position: relative;
  /*overflow: hidden;*/
}
.left_div_header > div {

  justify-content: center;
  align-items: center;
  flex: 1;
}


.left_div_header > p {
  margin-left: 10px;
  text-decoration: none;
}

.left_div_title_1 {
  display: flex;
  height: 52px;
  color: #5a5a5a;
  font-size: 24px;
  background-color: aquamarine;
}

.left_div_title_1 > div {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}

.left_div_title_1 > a {
  flex: 2.2;
  line-height: 52px;
  font-size: 12px;
  color: #5a5a5a;
  text-decoration: none;
}
.left_div_title_1  a {
  font-size: 20px;
}

.left_div_title > div:hover {
  background-color: white !important;
  transform: scale(1.1, 1);
  transition: 0.5s;
}

setion > div {
  background-image: url("../assets/imgs_ls/cat.jpg");
  background-repeat: no-repeat;
  background-size: 500px;
  background-position: 0px 350px;
  margin: 0 auto;
}

/*88888888888888888888888888888888888888888888888888888888888888*/
.right_div {
  flex: 3;
  float: right;
  width: 1000px;
  height: auto;
  /*!*overflow: hidden;*!*/
  /*background-color: yellow;*/
}


.right_div_top_1 {
  background: url("../assets/imgs_ls/9.png") no-repeat left;
  font-size: 14px;
  height: 50px;
  float: right;
  color: #5a5a5a;
  padding-left: 40px;
  line-height: 50px;
}

.right_t1 {
  width: 1000px;
  height: auto;
  overflow: hidden;
}

.right_t1_l {
  float: left;
  width: 490px;
  height: auto;
  /*overflow: hidden;*/
}

.right_t1_l_t {
  /*width: 490px;*/
  height: 96px;
  font-size: 24px;
  color: #5a5a5a;
  line-height: 48px;
}

.right_t1_l_c {
  /*width: 490px;*/
  height: 180px;
  overflow: hidden;
  font-size: 14px;
  color: #5a5a5a;
  line-height: 30px;
  margin-top: 15px;
}

.r_t_r {
  float: right;
  width: 480px;
  height: 278px;
  border: 1px solid #bcbcbc;
}

.r_t_l {
  margin-top: 50px;
  width: 1000px;
  height: 660px;
  /*background-color: pink;*/
}

.r_t_l > .el-carousel {
  height: 100%;
}

.r_t_l_1 {
  display: flex;
  height: 100%;
}

.r_t_l_1 > div:first-of-type {
  flex: 1;
}

.r_t_l_1 > div:last-of-type {
  flex: 1;
}

.r_t_l_2 {
  float: right;
  width: 520px;
  height: 507px;
}

.r_t_l_2_1 {
  width: 100%;
  font-size: 30px;
  color: #5a5a5a;
  height: 40px;

  /*position: fixed;*/
}

.r_t_l_2_2 {
  width: 480px;
  height: 420px;
  overflow-y: auto;
  font-size: 14px;
  color: #5a5a5a;
  line-height: 30px;
  margin-top: 30px;
}
</style>